<template>
  <div class="app-container">
    <div class="qrCodeContainer" style="width: 450px; height: 50px; display: none; width: 100%">
      <h1 class="title" style="width: 480px; margin-left: 27%">{{ $t(`Print.RongyangShoesCoLtdReturnForm`) }}</h1>
      <div style="width: 95%; margin: auto">
        <div style="display: flex; width: 100%; font-size: 13px; justify-content: space-between">
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.ReturnOrderNumber`) }}:{{ returnLotList }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.ReturnDate`) }}:{{ userInfo?.lastLogin.split(' ')[0] }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.Manufacturers`) }}:{{ userInfo?.deptName }}</h2>
          <h2 style="margin-left: 70px; font-size: 13px">{{ $t(`Print.DateOfPrinting`) }}:{{ formatCurrentDateTime(currentDate) }}</h2>
        </div>

        <div style="width: 100%">
          <table style="width: 100%; font-size: 13px">
            <thead>
              <tr>
                <th>{{ $t(`Print.TheItemCode`) }}</th>
                <th>{{ $t(`Print.MaterialName`) }}</th>
                <th>{{ $t(`Print.MaterialColorKey`) }}</th>
                <th>{{ $t(`Print.Specification`) }}</th>
                <th>{{ $t(`Print.Unit`) }}</th>
                <th>{{ $t(`Print.NumberOfReturns`) }}</th>
                <th>{{ $t(`Print.Kilograms`) }}</th>
                <th>{{ $t(`Print.UnitPrice`) }}</th>
                <th>{{ $t(`Print.Amount`) }}</th>
                <th>{{ $t(`Print.Directives`) }}</th>
                <!-- 更多的表头单元格 -->
              </tr>
            </thead>
            <tbody>
              <tr v-for="(iten1, index) in slipNoList1" :key="index">
                <td>{{ iten1.mtlNo }}</td>
                <!-- <td>{{ iten1.slipNo }}</td> -->
                <td>{{ iten1.mtlName }}</td>
                <td>{{ iten1.mtlColor }}</td>
                <td>{{ iten1.mtlSpec }}</td>
                <td>{{ iten1.mtlUnit }}</td>
                <td>{{ iten1.returnQty }}</td>

                <td>{{ iten1.kgQty }}</td>
                <td>{{ iten1.price }}</td>
                <td>{{ iten1.amt }}</td>

                <td>{{ iten1.purLot }}</td>
                <!-- 更多的数据单元格 -->
              </tr>
              <!-- 更多的行 -->
            </tbody>
            <!-- 可选的 tfoot 部分 -->
          </table>

          <!-- <Table :tableHeader="tableHeader5" :tableData="slipNoList" /> -->
        </div>
        <div style="display: flex; justify-content: space-between; width: 85%; font-size: 17px; width: 80%; margin: auto">
          <h2 style="font-size: 13px">{{ $t(`Print.SupplyAndMarketingSupervisor`) }}:</h2>
          <h2 style="font-size: 13px">{{ $t(`Print.Purchaser`) }}:</h2>
          <h2 style="font-size: 13px">{{ $t(`Print.WarehouseKeeper`) }}:{{ userInfo?.chiName }}</h2>
        </div>
      </div>
    </div>

    <Find :OriginalFilter="{ static: true }" :formList="formList1" @Launchform="Launchform" @findClicked="findClicked" />
    <Find :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList3" @findClicked="findClicked3" />

    <el-card style="margin-top: 7px" shadow="always" :body-style="{ padding: '5px' }">
      <div>
        <h1>{{ $t(`Print.MaterialInspectionDataInquiry`) }}</h1>
        <div>
          <Table
            @selectList="selectList"
            :selection="true"
            :tableHeader="tableHeader"
            :tableData="TableDateOne.dtos"
            :TableHeight="50"
            :outTableHeight="105"
            :isLoading="isLoading"
            @currentRow="clicktogetdata"
            @confirmChange="confirmChange"
            :getTableList="MaterialReturnOperationMainData"
            @dblclick="ChangeInputField"
          />
        </div>
      </div>
      <div style="margin-top: 30px; display: flex">
        <div style="width: 40%">
          <h1>{{ $t(`Print.OrderRequisitionDetails`) }}</h1>
          <div>
            <Table
              :tableHeader="tableHeader1"
              :tableData="TableDateList.lotDtos"
              :TableHeight="50"
              :outTableHeight="105"
              :summaryData="summaryData"
              summary
              :isLoading="isLoading1"
            />
          </div>
        </div>
        <div style="margin-top: 20px; margin-left: 40px">
          <Table :tableHeader="tableHeader2" :tableData="TableDateList.detailDtos" :TableHeight="50" :outTableHeight="105" :isLoading="isLoading1" />
        </div>
      </div>
      <PageModule :PageData="{ total }" @pageChange="handleSizeChange" @pageSizeChange="handleCurrentChange" />
    </el-card>

    <el-drawer v-model="drawer1" :direction="'ttb'" :before-close="handleClose1" size="small" :with-header="false">
      <span @click="drawer1 = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <h1 style="font-size: 18px; margin-top: 12px">{{ $t(`Print.TheQueryWasNotInspected`) }}</h1>
      <Find
        :OriginalFilter="{ static: true }"
        :searchImg="false"
        style="margin-top: 12px"
        :formList="formList2"
        @Launchform="Launchform1"
        @findClicked="findClicked1"
      />

      <Table
        style="margin-top: 30px"
        :tableHeader="tableHeader3"
        :tableData="UntestedParameterTable.dtos"
        :TableHeight="80"
        :outTableHeight="105"
        :isLoading="isLoading2"
      />

      <PageModule :PageData="{ total: total1 }" @pageChange="handleSizeChange1" @pageSizeChange="handleCurrentChange1" />
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'MaterialReturnOperation'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted } from 'vue'
import {
  MaterialReturnOperation,
  MaterialManufacturer,
  MaterialDefect,
  UncheckedQuery,
  ReturnToBatchProcessing
} from '@/api/WarehouseDepartment/FactoryStorage/MaterialReturnOperation'
import type {
  MaterialReturnOperationParms,
  MaterialDataSubjectInterface,
  dtos,
  MaterialDefectInterface,
  MaterialDefectInterfaceIltc,
  UncheckedQueryInterface,
  UntestedParameter
} from '@/api/WarehouseDepartment/FactoryStorage/MaterialReturnOperation'
import { ElMessage } from 'element-plus'
// 退货单号
const returnLotList = ref<string>('')

const findClicked3 = (find: string) => {
  console.log(returnLotList.value)
  if (find === '打印') {
    if (returnLotList.value === null) {
      JMessage.warning('退货单号为空不可打印')
    } else {
      printQRCode()
    }
  }

  if (find === '打印(连打)') {
    if (returnLotList.value === null) {
      JMessage.warning('退货单号为空不可打印')
    } else {
      printQRCode()
    }
  }
}

const formList1 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入订购单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '送货日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '退库批处理'
  },
  {
    type: 'button',
    checkboxLabel: '未检验查询'
  }
])

const formList3 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入退货单号',
    inputValue: '',
    disabled: true
  },
  {
    type: 'button',
    checkboxLabel: '打印'
  },
  {
    type: 'button',
    checkboxLabel: '打印(连打)'
  }
])

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入订购单号',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '厂商',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'date',
    dateLabel: '送货日期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '分类',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
])

const ChangeInputField = () => {
  TableDateOne.value.dtos.forEach((item: any) => {
    item.change = 'Y'
  })
}

const slipNoList1 = ref<any>([])

// 日期
const formatCurrentDateTime = (date?: Date) => {
  const year = date!.getFullYear()
  const month = String(date!.getMonth() + 1).padStart(2, '0') // 使用padStart确保月份是两位数
  const day = String(date!.getDate()).padStart(2, '0') // 使用padStart确保日期是两位数
  const hours = String(date!.getHours()).padStart(2, '0') // 小时
  const minutes = String(date!.getMinutes()).padStart(2, '0') // 分钟
  const seconds = String(date!.getSeconds()).padStart(2, '0') // 秒

  // 返回格式化的日期时间字符串
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

const currentDate = ref(new Date())

// 退库批处理
const ReturnToBatchProcessingParms = ref([])

const BatchProcessingMethodOfReturnWarehouse = async () => {
  const result = await ReturnToBatchProcessing(ReturnToBatchProcessingParms.value)
  if (result.code === 200) {
    JMessage.success(result.message)
    MaterialReturnOperationMainData()
  } else {
    JMessage.error(result.message)
  }
}

const selectList = (selectedList: any) => {
  ReturnToBatchProcessingParms.value = selectedList.map((item: any) => {
    const { sendNo, purNo, purLot, sendQty, mtlName, mtlColor, returnQty, returnKgQty, aReason, mtlNo } = item || {}

    return {
      sendNo,
      purNo,
      purLot,
      sendQty,
      mtlName,
      mtlColor,
      returnQty,
      returnKgQty,
      aReason,
      mtlNo
    }
  })
}

// 修改后点击确定按钮
const confirmChange = async (row: any) => {
  const result = await LoginWork.put<any, any>(
    '/pcFactorStockQuery/MtlRtCheckUpdate',
    [row].map((item) => {
      return {
        sendNo: item.sendNo,
        purNo: item.purNo,
        purLot: item.purLot,
        sendQty: item.sendQty,
        mtlName: item.mtlName,
        mtlColor: item.mtlColor,
        returnQty: item.returnQty,
        returnKgQty: item.returnKgQty,
        aReason: item.aReason
      }
    })
  )
  if (result.code === 200) {
    JMessage.success(result.message)
    MaterialReturnOperationMainData()
  } else {
    JMessage.error(result.message)
  }
}

// 未检检验查询
const UncheckedQueryTableDateParms = ref<UntestedParameter>({
  mtlColor: '',
  mtlName: '',
  pageNum: 1,
  pageSize: 40,
  purLot: '',
  purNo: '',
  recNo: '',
  sendDateEnd: '',
  sendDateStart: '',
  typeNo: '',
  vendorName: ''
})

const UntestedParameterTable = ref<UncheckedQueryInterface>({
  dtos: []
})

const UncheckedQueryTableDate = async () => {
  try {
    isLoading2.value = true
    const result = await UncheckedQuery(UncheckedQueryTableDateParms.value)
    total1.value = result.total!
    UntestedParameterTable.value.dtos = result.dtos
    isLoading2.value = false
  } catch (error) {
    JMessage.error('查询出错')
    isLoading2.value = false
  }
}

interface summaryDataType {
  index: number
  num: number | undefined
}

const summaryData = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  },
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  }
])

const handleClose1 = (done: () => void) => {
  done()
}

const drawer1 = ref(false)

const isLoading = ref(true)

const isLoading1 = ref(true)

const isLoading2 = ref(true)

const TableDateList = ref<MaterialDefectInterfaceIltc>({
  detailDtos: [],
  lotDtos: [],
  qtyTotal: 0,
  sendTotal: 0,
  unSendTotal: 0
})

const clicktogetdata = (row: any) => {
  const { mtlColor, mtlName, purLot, purNo, sendNo, vendorName, returnNo } = row || {}

  MaterialDefectParms.value.mtlColor = mtlColor
  MaterialDefectParms.value.mtlName = mtlName
  MaterialDefectParms.value.purLot = purLot
  MaterialDefectParms.value.purNo = purNo!
  MaterialDefectParms.value.sendNo = sendNo!
  MaterialDefectParms.value.vendorName = vendorName
  returnLotList.value = returnNo
  formList3.value[0].inputValue = returnNo!

  if (mtlColor !== '' || mtlName !== '' || purLot !== '' || purNo !== '' || sendNo !== '' || vendorName !== '') {
    MaterialDefectTableDate()
  }

  slipNoList1.value = TableDateOne.value.dtos.filter((item: any) => row.returnNo === item.returnNo)
}

const MaterialDefectTableDate = async () => {
  isLoading1.value = true
  const result = await MaterialDefect(MaterialDefectParms.value)
  TableDateList.value.detailDtos = result.detailDtos!
  TableDateList.value.lotDtos = result.lotDtos
  summaryData.value[0].num = result.qtyTotal
  summaryData.value[1].num = result.sendTotal
  summaryData.value[2].num = result.unSendTotal
  isLoading1.value = false
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

const MaterialManufacturerVnder = async () => {
  let NewArray = []
  let NewArray1 = []
  const result = await MaterialManufacturer()
  NewArray = result.slipType.reduce((arr: any, item: any) => {
    if (item.typeName && item.typeNo) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.typeNo + ' ' + item.typeName)
    }
    return arr
  }, [])
  NewArray1 = result.vendor.reduce((arr: any, item: any) => {
    if (item.vendorNo && item.vendorName) {
      // 只添加非空的 typeName 和 typeNo
      arr.push(item.vendorNo + ' ' + item.vendorName)
    }
    return arr
  }, [])
  formList1.value[4].selectOptions = EvaluatesTheArrayReturnValue(NewArray1)
  formList1.value[5].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
  formList2.value[1].selectOptions = EvaluatesTheArrayReturnValue(NewArray1)
  formList2.value[4].selectOptions = EvaluatesTheArrayReturnValue(NewArray)
}

// 参数
const MaterialReturnOperationMainDataParms = ref<MaterialReturnOperationParms>({
  mtlColor: '',
  mtlName: '',
  pageNum: 1,
  pageSize: 40,
  purLot: '',
  purNo: '',
  recNo: '',
  sendDateEnd: '',
  sendDateStart: '',
  typeNo: '',
  vendorName: ''
})

const MaterialDefectParms = ref<MaterialDefectInterface>({
  mtlColor: '',
  mtlName: '',
  purLot: '',
  purNo: '',
  sendNo: '',
  vendorName: ''
})

const TableDateOne = ref<MaterialDataSubjectInterface>({
  dtos: []
})

const MaterialReturnOperationMainData = async () => {
  isLoading.value = true

  const result = await MaterialReturnOperation(MaterialReturnOperationMainDataParms.value)

  if (result) {
    const { mtlColor, mtlName, purLot, purNo, sendNo, vendorName, returnNo } = result.dtos[0]
    returnLotList.value = returnNo!
    formList3.value[0].inputValue = returnNo!
    MaterialDefectParms.value.mtlColor = mtlColor
    MaterialDefectParms.value.mtlName = mtlName
    MaterialDefectParms.value.purLot = purLot
    MaterialDefectParms.value.purNo = purNo!
    MaterialDefectParms.value.sendNo = sendNo!
    MaterialDefectParms.value.vendorName = vendorName
    // 然后进行后续操作
    slipNoList1.value = TableDateOne.value.dtos.filter((item: any) => returnNo === item.returnNo)
    if (mtlColor !== '' || mtlName !== '' || purLot !== '' || purNo !== '' || sendNo !== '' || vendorName !== '') {
      MaterialDefectTableDate()
    }
    total.value = result.total!
  }

  TableDateOne.value.dtos = result?.dtos?.map((item: dtos) => {
    if (item.acheckFlag === 'Y') {
      item.acheckFlag = '合格'
    } else {
      item.acheckFlag = '不合格'
    }
    if (item.pcheckFlag === 'Y') {
      item.pcheckFlag = '合格'
    }
    {
      item.pcheckFlag = '不合格'
    }
    return item
  })
  isLoading.value = false
}

const tableHeader = ref([
  {
    label: '类型',
    prop: 'slipType',
    change: true
  },
  {
    label: '送货日期',
    prop: 'sendDate',
    change: true
  },
  {
    label: '送货单号',
    prop: 'sendNo',
    change: true
  },
  {
    label: '订购单号',
    prop: 'purNo',
    change: true
  },
  {
    label: '厂商名称',
    prop: 'vendorName',
    change: true
  },
  {
    label: '指令',
    prop: 'purLot',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'mtlColor',
    change: true
  },
  {
    label: '材料名称',
    prop: 'mtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'mtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'mtlUnit',
    change: true
  },
  {
    label: '外观合格否',
    prop: 'acheckFlag',
    change: true
  },
  {
    label: '物性合格否',
    prop: 'acheckFlag',
    change: true
  },
  {
    label: '暂收数量',
    prop: 'sendQty',
    change: true
  },
  {
    label: '退货数量',
    prop: 'returnQty'
  },
  {
    label: '合格数量',
    prop: 'acceptQty',
    change: true
  },
  {
    label: '退货公斤数',
    prop: 'returnKgQty'
  },
  {
    label: '退货原因备注',
    prop: 'aReason'
  },
  {
    label: '退货单号',
    prop: 'returnNo',
    change: true
  }
])

const tableHeader1 = ref([
  {
    label: '指令',
    prop: 'lotDetail'
  },
  {
    label: '请购数量',
    prop: 'qty'
  },
  {
    label: '已收数量',
    prop: 'sendQty'
  },
  {
    label: '未收数量',
    prop: 'unSendQty'
  }
])

const tableHeader2 = ref([
  {
    label: '物性不良原因',
    prop: 'pReason'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '公斤数',
    prop: 'kgQty'
  },
  {
    label: '染费',
    prop: 'kgQty'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '入库单号',
    prop: 'recNo'
  },
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '厂商代码',
    prop: 'vendorNo'
  }
])

const tableHeader3 = ref([
  {
    label: '送货日期',
    prop: 'sendDate'
  },
  {
    label: '订购单号',
    prop: 'purNo'
  },
  {
    label: '厂商代码',
    prop: 'vendorNo'
  },
  {
    label: '厂商名称',
    prop: 'vendorName'
  },
  {
    label: '指令',
    prop: 'purLot'
  },
  {
    label: '材料颜色',
    prop: 'mtlColor'
  },
  {
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '暂收数量',
    prop: 'sendQty'
  },
  {
    label: '单价',
    prop: 'price'
  },
  {
    label: '金额',
    prop: 'amt'
  },
  {
    label: '公斤数',
    prop: 'kgQty'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '入库单号',
    prop: 'recNo'
  },
  {
    label: '入库日期',
    prop: 'recDate'
  }
])

// 分页器
const total = ref(0)

const handleSizeChange = (val: number) => {
  MaterialReturnOperationMainDataParms.value.pageNum = val
  MaterialReturnOperationMainData()
}

const handleCurrentChange = (val: number) => {
  MaterialReturnOperationMainDataParms.value.pageNum = val
  MaterialReturnOperationMainData()
}

// 分页器
const total1 = ref(0)

const handleSizeChange1 = (val: number) => {
  UncheckedQueryTableDateParms.value.pageNum = val
  UncheckedQueryTableDate()
}

const handleCurrentChange1 = (val: number) => {
  UncheckedQueryTableDateParms.value.pageNum = val
  UncheckedQueryTableDate()
}

// 统一调用接口
const interAceFunct = () => {
  MaterialManufacturerVnder()

  MaterialReturnOperationMainData()
}

// 用户信息
const userInfo = ref()

onMounted(() => {
  interAceFunct()

  let userInf = sessionStorage.getItem('userInfo')

  userInfo.value = JSON.parse(userInf!)
})

const Launchform = (row: any) => {
  MaterialReturnOperationMainDataParms.value.purNo = row[0].inputValue
  MaterialReturnOperationMainDataParms.value.purLot = row[1].inputValue
  MaterialReturnOperationMainDataParms.value.mtlName = row[2].inputValue
  MaterialReturnOperationMainDataParms.value.mtlColor = row[3].inputValue
  MaterialReturnOperationMainDataParms.value.sendDateStart = row[6].dateValue[0]
  MaterialReturnOperationMainDataParms.value.sendDateEnd = row[6].dateValue[1]
  MaterialReturnOperationMainDataParms.value.vendorName = row[4].selectValue?.split(' ')[1]?.trim()
  MaterialReturnOperationMainDataParms.value.typeNo = row[5].selectValue?.split(' ')[0]?.trim()
  MaterialReturnOperationMainData()
}

const findClicked = (find: any) => {
  if (find === '置空') {
    clearFormList1()
  }
  if (find === '未检验查询') {
    drawer1.value = true
    UncheckedQueryTableDate()
  }
  if (find === '退库批处理') {
    if (ReturnToBatchProcessingParms.value.length === 0) {
      JMessage.warning('请选择需要退库批处理的数据')
    } else {
      BatchProcessingMethodOfReturnWarehouse()
    }
  }
}

const printQRCode = () => {
  const qrCodeContainer = document.querySelector<any>('.qrCodeContainer')
  if (qrCodeContainer) {
    // 临时显示 .qrCodeContainer 以获取其内容
    qrCodeContainer.style.display = 'block'

    const printWindow = window.open('', '_blank')
    printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印指令领料作业</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
                /* 打印时的样式 */
             
                
                /* 其他打印样式 */
            }
            h2 {
                    margin-left: initial; /* 或者设置适合打印的左边距 */
                    page-break-inside: avoid; /* 避免在h2元素内部分页 */
                }
               

            table, th, td {
                    border: 1px solid black; 
                    border-collapse: collapse; 
                    text-align: center;
                  }
                  th, td {
                    padding: 5px; /* 设置内边距 */
                    text-align: left; /* 设置文本对齐方式 */
                    text-align: center;
                    font-size:11px
                  }
                  .double-line {
                    border-top: 2px dashed red; 
                    border-bottom: 2px dashed red; 
                    text-align: center;
                  }
           
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

    // 将 .qrCodeContainer 的内容复制到打印窗口的 body 中
    const cloneContainer = qrCodeContainer.cloneNode(true)
    printWindow!.document.body.appendChild(cloneContainer)

    printWindow!.document.write(`
        </body>
      </html>
    `)
    printWindow!.document.close()

    // 开始打印
    printWindow!.print()

    // 打印完成后，可以恢复 .qrCodeContainer 的原始显示状态
    qrCodeContainer.style.display = 'none'
  }
}

const clearFormList1 = () => {
  formList1.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    if (item.type === 'date') {
      item.dateValue = ''
    }
    // Add other conditions for different form item types
  })
  formList1.value.forEach((item) => {
    if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}

const Launchform1 = (row: any) => {
  UncheckedQueryTableDateParms.value.purNo = row[0].inputValue
  UncheckedQueryTableDateParms.value.vendorName = row[1].selectValue?.split(' ')[1]?.trim()
  UncheckedQueryTableDateParms.value.sendDateStart = row[2].dateValue[0]
  UncheckedQueryTableDateParms.value.sendDateEnd = row[2].dateValue[1]
  UncheckedQueryTableDateParms.value.purLot = row[3].inputValue
  UncheckedQueryTableDateParms.value.typeNo = row[4].selectValue?.split(' ')[0]?.trim()
  UncheckedQueryTableDateParms.value.mtlName = row[5].inputValue
  UncheckedQueryTableDate()
}

const findClicked1 = (find: any) => {
  if (find === '置空') {
    clearFormList2()
  }
}

const clearFormList2 = () => {
  formList2.value.forEach((item) => {
    if (item.type === 'input') {
      item.inputValue = ''
    }
    // Add other conditions for different form item types
  })
  formList2.value.forEach((item) => {
    if (item.type === 'select') {
      item.selectValue = ''
    }
    // Add other conditions for different form item types
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
